<template>
  <div class="top-box">
    <el-tabs @tab-change="handleChangeTab" class="demo-tabs" v-model="state.activeName">
      <el-tab-pane label="单位线" name="unitline">
        <mulLineChart :height="'70%'" :x-labels="state.xLabels" :y-values="state.yValues" />
      </el-tab-pane>
      <el-tab-pane label="降雨径流量相关图" name="rainfall" lazy>
        <el-tabs @tab-change="handleChangeTabP" class="demo-tabs" v-model="state.activeNameP">
          <el-tab-pane label="P-Pa-R" name="P-Pa-R">
            <mulPpaChart1y
              :height="'70%'"
              :x-labels="state.ppayLabels"
              :y-values="state.ppayValues"
            />
          </el-tab-pane>
          <el-tab-pane label="P+Pa-R" name="P+Pa-R" lazy>
            <mulPpaChart :height="'70%'" :x-labels="state.ppaLabels" :y-values="state.ppaValues" />
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="衰减系数K" name="attenuation">
        <dynamicTable :table-data="state.gateTableData" :table-headers="state.gateTableHeaders" />
      </el-tab-pane>
      <el-tab-pane label="最大初损IM" name="initial-loss">
        <dynamicTable :table-data="state.lossTableData" :table-headers="state.lossTableHeaders"
      /></el-tab-pane>
    </el-tabs>
  </div>
  <div class="top-title">参数配置信息</div>
  <div class="config-box">
    <div class="config-box-left">
      <span>参数配置方案：</span>
      <el-input
        v-model="state.schemeData.scName"
        class="m-2"
        placeholder="请输入"
        v-if="state.editFlag"
      />
      <el-select
        v-model="state.schemeId"
        class="m-2"
        placeholder="请选择"
        @change="handleChangeScheme"
        v-else
      >
        <el-option
          v-for="item in state.schemeList"
          :key="item.id"
          :label="item.scName"
          :value="item.id"
        />
      </el-select>
    </div>
    <div class="btn">
      <el-button type="primary" class="btn-pading" @click="handleCreated" v-if="!state.editFlag"
        >新建</el-button
      >
      <el-button type="primary" class="btn-pading" @click="handleSave" v-if="state.editFlag"
        >保存</el-button
      >
      <el-button type="primary" class="btn-pading" @click="handleCancel" v-if="state.editFlag"
        >取消</el-button
      >
      <el-button type="success" class="btn-pading" @click="handleEdit" v-if="!state.editFlag"
        >编辑</el-button
      >
      <el-button type="danger" class="btn-pading" @click="handleDelete">删除</el-button>
    </div>
  </div>
  <div class="bottom-table">
    <div class="select-item">
      <span class="select-title">降雨径流类型：</span>
      <el-select
        v-model="state.schemeData.ppaType"
        class="m-2"
        placeholder="请选择"
        @change="handleChange"
      >
        <el-option label="P-Pa-R" :value="0" />
        <el-option label="P+Pa-R" :value="1" />
      </el-select>
    </div>
    <div class="select-item" v-if="state.schemeData.ppaType == 1">
      <span class="select-title">降雨径流线编号：</span>
      <el-select
        v-model="state.schemeData.ppaNo"
        class="m-2"
        placeholder="请选择"
        @change="handleChange"
      >
        <el-option
          v-for="item in state.ppaNoList"
          :key="item.no"
          :label="item.no"
          :value="item.no"
        />
      </el-select>
    </div>
    <div class="select-item">
      <span class="select-title">单位线编号：</span>
      <el-select
        v-model="state.schemeData.uno"
        class="m-2"
        placeholder="请选择"
        @change="handleChange"
      >
        <el-option v-for="item in state.unoList" :key="item.no" :label="item.no" :value="item.no" />
      </el-select>
    </div>
  </div>
</template>

<script setup>
import {
  getApiK,
  getApiIM,
  getApiUnitLines,
  getApiP_PaRLine,
  getApiPPaRLine,
  deleteApiScheme,
  getApiSchemes,
  saveApiScheme
} from '@/services/modules/model-config'
import { ref, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
import dynamicTable from '@/components/app-publicui/dynamic-table.vue'
import mulLineChart from '@/components/app-echart/mul-line-chart.vue'
import mulPpaChart from '@/components/app-echart/mul-ppa-chart.vue'
import mulPpaChart1y from '@/components/app-echart/mul-ppa-chart2y.vue'
const state = reactive({
  yValues: [],
  xLabels: [],
  ppaLabels: [],
  ppaValues: [],
  ppayLabels: [],
  ppayValues: [],
  schemeId: undefined,
  schemeList: [],
  editFlag: false,
  ppaNoList: [],
  ppayNoList: [],
  unoList: [],
  schemeData: { ppaType: 0 },
  activeName: 'unitline',
  activeNameP: 'P-Pa-R',
  gateTableHeaders: [],
  gateTableData: [],
  lossTableData: [],
  lossTableHeaders: []
})
const props = defineProps({
  // 点击断面 水库的信息
  sectionObj: {
    type: Object,
    default: () => {}
  },
  // 模型信息
  modelobj: {
    type: Object,
    default: () => {}
  }
})

async function getTableData() {
  state.schemeId = ''
  state.schemeData = {}
  // 系数
  getApiK({
    blkcd: props.sectionObj.blkcd
  }).then((res) => {
    if (res.code == 200) {
      state.gateTableHeaders = res.data.title
      state.gateTableData = res.data.val
    }
  })
  // 最大初损
  getApiIM({
    blkcd: props.sectionObj.blkcd
  }).then((res) => {
    if (res.code == 200) {
      state.lossTableHeaders = res.data.title
      state.lossTableData = res.data.val
    }
  })
  //单位线
  const res = await getApiUnitLines({ blkcd: props.sectionObj.blkcd })
  if (res.code === 200) {
    state.xLabels = []
    state.unoList = res.data
    state.yValues = res.data
    if (state.unoList.length)
      state.unoList[0].lines.forEach((e) => {
        state.xLabels.push(e.t)
      })
  }
  //p-pa-r
  const result = await getApiP_PaRLine({ blkcd: props.sectionObj.blkcd })
  if (result.code === 200) {
    state.ppayLabels = []
    state.ppayNoList = result.data
    state.ppayValues = result.data
    if (state.ppayNoList.length)
      state.ppayNoList[0].lines.forEach((e) => {
        state.ppayLabels.push(e.p)
      })
  }
  //p+pa+r
  const lineRes = await getApiPPaRLine({ blkcd: props.sectionObj.blkcd })
  if (lineRes.code === 200) {
    state.ppaLabels = []
    state.ppaNoList = lineRes.data
    state.ppaValues = lineRes.data
    if (state.ppaNoList.length)
      state.ppaNoList[0].lines.forEach((e) => {
        state.ppaLabels.push(e.ppa)
      })
    console.log('66', state.ppaLabels)
  }
  //方案列表
  getSchemeArr()
}

/**
 *
 */
function handleChangeScheme(item) {
  state.schemeId = item
  state.schemeData.scName = state.schemeList.filter((e) => e.id == item)[0].scName
  // state.schemeData.id = item
}
// getTableData()
watch(
  () => {
    props.sectionObj.blkcd
  },
  () => {
    getTableData()
  },
  {
    deep: true
    // immediate: true
  }
)
/**
 * 方案列表
 */
const getSchemeArr = async () => {
  const schemeRes = await getApiSchemes({ blkcd: props.sectionObj.blkcd })
  if (schemeRes.code === 200 && schemeRes.data) {
    if (schemeRes.data.length > 0) {
      state.schemeList = schemeRes.data
      state.schemeId = state.schemeList[0].id
      state.schemeData = state.schemeList[0]
    } else {
      state.schemeList = []
      state.schemeId = ''
      state.schemeData = ''
    }
  }
}
/**
 * 保存
 */
const editsaveApiScheme = async () => {
  state.schemeData.blkcd = props.sectionObj.blkcd
  state.schemeData.mid = props.modelobj.id
  if (state.schemeId) {
    state.schemeData.id = state.schemeId
  }
  const res = await saveApiScheme(state.schemeData)
  if (res.code == 200) {
    getSchemeArr()
    handleCancel()
  }
}
// 新建
function handleCreated() {
  state.editFlag = true
  state.schemeData = {}
  state.schemeData.scName = ''
}
// 编辑
function handleEdit() {
  state.editFlag = true
}
// 删除
async function handleDelete() {
  ElMessageBox.confirm(`是否删除`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const delRes = await deleteApiScheme({ id: state.schemeData.id })
      if (delRes.code === 200) {
        getSchemeArr()
      }
    })
    .catch(() => {})
}
function handleSave() {
  editsaveApiScheme()
}
function handleCancel() {
  state.editFlag = false
}
</script>

<style lang="less" scoped>
.top-box {
  height: 450px;

  :deep(.demo-tabs) {
    height: 100%;
    .el-tabs__header {
      pointer-events: none;
      .el-tabs__nav-wrap {
        pointer-events: auto;
      }
    }
    .el-tabs__content {
      height: 100%;
      .el-tab-pane {
        height: 100%;
        overflow-y: auto;
      }
    }
  }
}
.top-title {
  padding-left: 10px;
  margin: 20px 0 10px 0;
  color: #409eff;
}
.el-tabs {
  margin-left: 10px;
}

.bottom-table {
  display: flex;
  padding: 0 10px;
  margin-top: 10px;
  height: calc(100% - 620px);
  color: #797979;
  .select-item {
  }
}
.config-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0 20px 10px;
  color: #797979;
  // justify-content: space-between;
}
.config-title {
  width: 150px;
}
.m-2 {
  margin-left: 10px;
  margin-right: 20px;
  width: 150px;
}

.btn {
  margin-right: 20px;
  display: flex;
  :deep(.el-button) {
    margin-right: 15px;
  }
}
</style>
